<template>
	<view class="nav_container" :style="{height:`${height}rpx`,backgroundColor:bgColor}">
		<view class="nav_left" @click="leftClick">
			<view class="left_icon" v-show="show_leftIcon">
				<u-icon :name="left_icon" :size="left_size" :color="left_text_color"></u-icon>
			</view>

			<view class="left_text" :style="{fontSize:`${left_size}rpx`,color:left_text_color}">
				{{left_text}}
			</view>
		</view>
		<view class="nav_title">
			{{title_text}}
		</view>
		<view class="nav_right" @click="rightClick">

			<view class="right_text" :style="{fontSize:`${right_size}rpx`,color:right_text_color}">
				{{right_text}}
			</view>
			<view class="right_icon" v-show="show_rightIcon">
				<u-icon :name="right_icon" :size="right_size" :color="right_text_color"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Navbar",
		data() {
			return {

			};
		},
		props: {
			// 导航栏背景色
			bgColor: {
				type: String,
				default: '#fff'
			},
			// 导航栏高度
			height: {
				type: Number || String,
				default: '100'
			},
			// 导航栏左侧文字字号(图标同)
			left_size: {
				type: Number || String,
				default: '28'
			},
			// 导航栏左侧文字颜色(图标同色)
			left_text_color: {
				type: String,
				default: '#001f3f'
			},
			// 导航栏左侧文字
			left_text: {
				type: String,
				default: '返回'
			},
			// 是否暂时导航栏左侧图标
			show_leftIcon: {
				type: Boolean,
				default: true
			},
			// 导航栏左侧图标(本地图片)
			left_img_icon: {
				type: String,
				default: 'arrow-left'
			},
			// 导航栏左侧图标(u-view)
			left_icon: {
				type: String,
				default: 'arrow-left'
			},
			// 导航栏右侧文字字号(图标同)
			right_size: {
				type: Number || String,
				default: '28'
			},
			// 导航栏右侧文字颜色(图标同色)
			right_text_color: {
				type: String,
				default: 'blue'
			},
			// 导航栏右侧文字
			right_text: {
				type: String,
				default: '查看'
			},
			// 是否暂时导航栏右侧图标
			show_rightIcon: {
				type: Boolean,
				default: false
			},
			// 导航栏右侧图标（u-view）
			right_icon: {
				type: String,
				default: 'arrow-left'
			},
			// 导航栏标题文字
			title_text: {
				type: String,
				default: '标题'
			}
		},
		methods: {
			leftClick() {
				// #ifdef H5
				window.history.go(-1)
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			rightClick() {
				this.$emit('rightClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav_container {
		padding: 0rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.nav_left,
		.nav_right {
			display: flex;
			align-items: center;
			width: 200rpx;
		}

		.nav_left {
			.left_icon {
				margin-right: 20rpx;
			}
		}

		.nav_title {
			font-size: 30rpx;
			font-weight: 800;
		}

		.nav_right {
			justify-content: flex-end;

			.right_text {
				margin-right: 20rpx;
			}


		}
	}
</style>